<template>
  <div class="page">
    <!--    <ul class="nav">-->
    <!--      <li>111</li>-->
    <!--      <li>222</li>-->
    <!--      <li>333</li>-->
    <!--      <li>444</li>-->
    <!--      <a-button>这是ant按钮</a-button>-->

    <!--    <div class="fu">-->
    <!--      <div class="zi"></div>-->
    <!--    </div>-->


    <!--    <div id="top">我是顶部</div>
        <div class="white">
          <div class="parallax">dead</div>
        </div>

        <div class="grey"/>
        <div class="white"/>
        <div class="blue"/>
        <div class="grey"/>
        <div class="white"/>
        <div class="blue"/>

        <div class="but">
          <button v-copy="context" id="backTop3" @click="back">回到顶部</button>
          <div v-debounce="press">点我啊</div>
          <div v-waterMarker="{text:'lwf',textColor:'rgba(180, 180, 180, 0.4)'}" class="banben">9999</div>
        </div>-->

    <section class="description firstblock">
      <div class="fixed dead">Dead</div>
      <div class="fixed simple">Simple</div>
      <div class="fixed parallax">Parallax</div>
      <div class="fixed scrolling">Scrolling</div>
    </section>

    <div class="text">
      <div class="parallax1">Parallax1</div>
    </div>


    <!--    </ul>-->
  </div>
</template>

<script>

import rallax from 'rallax.js';
import axios from 'axios';

export default {
  name: 'Profile',

  data() {
    return {
      context: '复制成功啦  哈哈哈'
    };
  },

  mounted() {

    //原型对象实现了共享方法prototype
    //对象原型__proto__,对象的原型__proto__指向构造函数的原型对象prototype,他们两个都有构造函数constructor
    /*function Star() {

    }

    let ldh = new Star();*/

    // console.log(ldh.__proto__);//指向的Star的原型对象prototype
    // console.log(Star.prototype === ldh.__proto__);//true
    // console.log(Star.prototype.constructor===Star); //true
    // console.log(ldh.constructor === Star); //true
    // console.log(ldh === Star.prototype); //false

    // console.log(ldh)
    // console.log(Star)


    // console.log(ldh.__proto__.__proto__);//指向的Star的原型对象的对象原型Object
    // console.log(ldh.__proto__.__proto__.__proto__);//指向的Star的原型对象的对象原型Object的对象原型null

    // function Father(uname, age) {
    //   this.uname = uname;
      //   this.age = age;
      // }
      //
      // Father.prototype.company = function () {
      //   console.log(`${this.name} 有 ${this.age} 元`);
      // };
      //
      // let father = new Father('lwf', 28);
      //
      // console.log(111, Father.prototype);

      // function Son(uname, age, score) {
      //   Father.call(this, uname, age);
      //   this.score = score;
      // }
      //
      // //利用父类原型对象实现子类的继承
      // Son.prototype = new Father();
      // Son.prototype.constructor = Son;
      //
      //   //在继承父类原型对象的基础上增添子类独有的方法
      //   Son.prototype.exam = function exam() {
      //     console.log('儿子要考试');
      //   };
      //
      //   var son = new Son('刘德华', 18, 100);
      //
      //   son.exam();
      //
      // console.log(son);
      // console.log(Father.prototype);
      // console.log(Son.prototype.constructor);

      //
      // class New {
      //
      // }
      //
      // console.log(typeof New);

      // var str = '     andy    ';
      // console.log(str);
      //
      // var str1 = str.trim();
      // console.log(str1);

      //给定一个字符串，找到它的第一个不重复的字符，并返回它的索引。如果不存在，则返回 -1
      /* var firstUniqChar = function (s) {
         for (let i in s) {
           console.log(999, i);

           if (s.indexOf(s[i]) === s.lastIndexOf(s[i])) {
             return i;
           }

         }
         return -1;
       };
       var s = 'leetcode';
       let a = firstUniqChar(s);

       console.log(a);*/


        //Object.defineProperty()定义新属性或修改原有的属性,Object.defineProperty(obj,prop,descriptor)
        //descriptor的属性包含value,writable,enumerable,configurable
        /*var obj = {
          id: 1
        };

        Object.defineProperty(obj, 'num', {
          value: 1000,
          enumerable: true,
          configurable: true
        });

        Object.defineProperty(obj, 'id', {
          writable: false,//是否可以被重写，默认false
          enumerable: false,//是否可以被遍历，默认false
          configurable: false//是否可以被删除,是否可以修改descriptor里面的特性，例如value，默认false

        });

        // obj.id = 3;

        delete obj.num;
        console.log(obj);
        console.log(Object.keys(obj));*/

        // 函数的定义方式
        //1.函数声明方式


        // function fn() {
        //
        // }
        //
        // var fun = function () {
        // };
        //
        // var f = new Function('a', 'b', 'console.log(a+b)');
        //
        // f(1,2);

        // var o = {
        //   name: 'andy'
        // };
        //
        // function fn(arr) {
        //   console.log(this);
        //   console.log(arr);
        //
        // }

        // fn.apply(o, ['pink']);

        // var f = fn.bind(o, 22);
        // console.log(f);
        // f();

        // var arr = [1, 22, 444];
        //
        // var max = Math.max.apply(Math, arr);
        // console.log(max);

        // (function () {
        //   'use strict';
        // })();

        /*function fn(a, b, callback) {
          console.log(a + b);

          callback && callback();
        }

        fn(1, 2, function () {
          console.log('执行了callback');
        });*/

        //fun()就是闭包函数
        /*function fun() {
          var num = 10;

          function fn() {
            console.log(num);
          }

          return fn;
        }

        var f = fun();

        f();*/

        //相当于
        // var f = function fun() {
        //   console.log(num);
        // };


      // var lis = document.querySelector('.nav').querySelectorAll('li');

        //为lis[i]手动添加一个index属性
        /*for (var i = 0; i < lis.length; i++) {
          lis[i].index = i;
          lis[i].onclick = function () {

            console.log(this.index);

          };
        }*/

        //用闭包的方式监听点击，其中立即执行函数是闭包
        /*for (var i = 0; i < lis.length; i++) {
          (function (i) {
            lis[i].onclick=function () {
              console.log(i);
            }
          })(i);
        }*/

        //闭包应用，3秒钟以后打打印li元素的所有内容
        /*for (var i = 0; i < lis.length; i++) {
          // lis[i].onclick = function () {
          //   setTimeout(function () {
          //     console.log(i);
          //   }, 3000);
          // };
          (function (i) {
            lis[i].onclick = function () {
              setTimeout(function () {
                console.log(lis[i].innerHTML);
              }, 3000);
            };
          })(i);
        }*/

      //递归实现斐波那契数列
      /* function fn(n) {
         if (n === 1 || n === 2) {
           return 1;
         } else {
           return fn(n - 2) + fn(n - 1);
         }
       }

       console.log(fn(4));*/


      //浅拷贝和深拷贝
      //浅拷贝只拷贝一层，更深层次的对象级别只靠逼引用
      //深拷贝拷贝多层，每一级别的数据都会被拷贝,重新开辟了一份空间
      /*var obj = {
        id: '1',
        name: 'andy',
        color: ['pink', 'blue']
      };

      var o = {};*/

      // for (var k in obj) {
      //   console.log(k);
      //   console.log(obj[k]);
      //   o[k] = obj[k];
      //   console.log(o[k]);
      // }

      //浅拷贝语法糖
      // Object.assign(o, obj);
      // console.log(o);

      /*function deepCopy(newobj, oldobj) {

        for (var k in oldobj) {
          //判断属性值属于那种数据类型
          var item = oldobj[k];
          if (item instanceof Array) {
            newobj[k] = [];
            deepCopy(newobj[k], item);
          } else if (item instanceof Object) {
            newobj[k] = {};
            deepCopy(newobj[k], item);
          } else {
            newobj[k] = item;
          }
        }

      }

      deepCopy(o, obj);
      o.color = ['yellow'];
      console.log(o);
      console.log(obj);*/

      //let关键字不存在变量提升

      /*var num =10;
      if(true){
        console.log(num);
        let num=100;
      }*/


      /*function test(person) {
        person.age = 26;
        person = {
          name: 'yyy',
          age: 30
        };

        return person;
      }

      const p1 = {
        name: 'yck',
        age: 25
      };
      const p2 = test(p1);
      console.log(p1); // -> ?
      console.log(p2); // -> ?*/

      // let a = {};
      // let fn = function () {
      //   let that =this
      //   console.log(that);
      // };
      // fn.bind().bind(a); // => fn在第一次bind的时候已经将this指向了空，所以后来的都没有用了


      //使用闭包的方式解决异步问题
      //(一)我们首先使用了立即执行函数将i传入函数内部，这个时候值就被固定在了参数 j上面不会改变
      // 当下次执行 timer 这个闭包的时候，就可以使用外部函数的变量j，从而达到目的。

      // for (var i = 1; i <= 5; i++) {
      //
      //   (function (j) {
      //     setTimeout(function timer() {
      //       console.log(j);
      //     }, j * 1000);
      //   })(i);
      // }


      //（二）使用setTimeout的第三个参数，这个参数会被当做前面函数的参数传入
      // for (var i = 1; i <= 5; i++) {
      //   setTimeout(function timer(j) {
      //     console.log(j);
      //   }, i * 1000, i);
      // }

      //（三）使用let关键字，定义块级作用域（推荐）
      // for (let i = 1; i <= 5; i++) {
      //   setTimeout(function timer() {
      //     console.log(i);
      //   }, i * 1000);
      // }

      //给定一个大小为 n 的数组，找到其中的多数元素。多数元素是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素。
      // let nums = [3, 2, 3];
      // var majorityElement = function (nums) {
      //   nums.sort();
      //   return nums[parseInt((nums.length) / 2)];
      // };
      //
      // console.log(majorityElement(nums)) ;


      // var objects = [{ 'a': 1 }, { 'b': 2 }];
      //
      // var deep = _.cloneDeep(objects);
      // console.log(deep[0] === objects[0]);

      // let a = '1231';
      // console.log(a.replace('1', ''));
      // console.log(a.replaceAll('1', ''));

      /*
      // 定义发布者
      const seller = {};

      // 缓存列表：存放订阅者的回调函数
      seller.buyerList = [];

      // 订阅方法
      seller.listen = (user, fn) => {
        // 如果有人订阅了，那就将它存放到缓存列表中
        seller.buyerList.push(fn);
        console.log(`亲爱的 ${user}，你已经订阅了新鞋发布`);
      }

      // 发布信息
      seller.trigger = () => {
        const buyerList = seller.buyerList;
        for (let i in buyerList) {
          if (buyerList.hasOwnProperty(i)) {
            buyerList[i]();
          }
        }
      }

      const buyer1 = seller.listen('jsliang', () => console.log('颜色是黑色，尺码是 43 码')); // 亲爱的 jsliang，你已经订阅了新鞋发布
      const buyer2 = seller.listen('zhazhaliang', () => console.log('颜色是红色，尺码是 44 码')); // 亲爱的 zhazhaliang，你已经订阅了新鞋发布

      // 假设 2 秒后到货
      setTimeout(() => {
        seller.trigger();
      }, 5000);

      // 颜色是黑色，尺码是 43 码
      // 颜色是红色，尺码是 44 码
*/

      /*
      //代理模式
      const queuedObserver = new Set();

      const observe = fn => queuedObserver.add(fn);
      const observeable = obj => new Proxy(obj, {set});

      const set = function (target, key, value, receiver) {
        const result = Reflect.set(target, key, value, receiver);
        queuedObserver.forEach(observer => observer());
        return result;
      };


      const person = observeable({
        name: 'jsliang',
        age: 25
      });

      const print = () => {
        console.log(`姓名：${person.name}，年龄：${person.age}`);
      };

      const printTwo = () => {
        console.log('第二个执行函数');
      };
      observe(print);

      observe(printTwo);
      person.name = 'zhazhaliang'; // 姓名：zhazhaliang，年龄：25
*/


      //去除字符串中空格的两种方法
      /*let string = '12 3 7 8 9 ';
      console.log(888, string.split(' ').join(''));
      console.log(777, string.replace(/\s/g, ''));*/

      /*function add(x) {

        return function (y) {
          return function (z) {
            return x + y + z;
          };
        };

      }

      console.log(add(1)(2)(3));*/

      //var 可以重复声明
      /* var a = 'lwf';
       var a ='cll';

       console.log(a)//cll*/

      //内层变量覆盖外层变量，尽管它没执行
      /*var tmp = 'lwf';

      function f(){
        console.log(tmp);
        if(false) {
          var tmp = "hello";
        }
      }

      f()*/

      /*var foo = 3;

      function getFoo() {
        console.log(1, foo);
        var foo = foo || 5;//这个变量是函数作用域里面的
        console.log(2, foo); // 输出 5
      }

      getFoo();
      console.log(3, foo);*/

      /*var a = 1;
      function b() {
        a = 10;
        return;
        function a() {}
      }
      b();
      console.log(a);//1*/


      /*var foo = { n: 1 };

      (function(foo) {
        console.log(foo.n);
        foo.n = 3;
        foo = { n: 2 };
        console.log(foo.n);
      })(foo)

      console.log(foo.n);*/
      //判断变量数据类型的究极方式
      /*var a = [];

      console.log(Object.prototype.toString.call(a));
      console.log(Object.prototype.toString.call(a).slice(8, -1)==='Array');*/

      /*var name = 'window name';
      var a = {
        name: 'jsliang',
        fn: function () {
          console.log(this.name); // 输出啥？
        }
      }
     a.fn();*/

      /*var name = 'window name';
      function fn() {
        var name = 'jsliang';
        function innerFn() {
          // console.log(this.name);
          console.log(111,this)
        };
        // console.log(222,this.name)
        innerFn();
      }
      console.log(333,this)
      fn();*/

    /*const options = {
      speed: 0.1,
      mobilePx: 600
    };
    const parallax = rallax('.parallax', options);

    // parallax.start();

    parallax.when(
      () => window.scrollY <= 400,
      () => {
        console.log('大于400啦');
        parallax.start()
      }
    )

    parallax.when(
      () => window.scrollY > 400,
      () => {
        console.log('小于400啦');
        parallax.stop()
      }
    )*/

    const dead = rallax('.dead', {speed: 0.1, mobilePx: 100});
    const simple = rallax('.simple', {speed: 0.6, mobilePx: 600});
    const parallax = rallax('.parallax', {speed: 0.3, mobilePx: 600});
    const scrolling = rallax('.scrolling', {speed: 0.9, mobilePx: 600});

    const parallax1 = rallax('.parallax1', {speed: 0.3, mobilePx: 600});

    const objects = [dead, simple, parallax, scrolling];

    objects.forEach(obj => {
      obj.when(
        () => obj.scrollY() > 750,
        () => obj.stop()
      );
      obj.when(
        () => obj.scrollY() <= 750,
        () => obj.start()
      );
    });

    parallax1.when(
      () => parallax1.scrollY() > 600,
      () => parallax1.stop()
    );

    parallax1.when(
      () => parallax1.scrollY() < 600,
      () => parallax1.start()
    );

    window.onbeforeunload = () => {
      window.scrollTo(0, 0);
      // alternatively, you can put an animation function here
      // that will bring user to the top of page
    };

    axios.get('http://localhost:3000/student').then((res)=>{
      console.log(res)
    })

  },

  methods: {

    back() {
      const TOP = document.getElementById('top');
      TOP.scrollIntoView({behavior: 'smooth'});
      this.$message.success('已复制到剪切板');
    },

    press() {
      this.$message.success('别按啦');

    }

  },

  created() {

  }


};



</script>

<style lang="scss" scoped>

  /*flex实现垂直居中*/
  /*.fu {
    width: 100px;
    height: 100px;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
    .zi {
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  }*/

  /*绝对定位实现垂直居中*/
  /*.fu {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: relative;
    .zi {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }*/

  //transform实现垂直居中
  /*  .fu {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: relative;

      .zi {
        width: 50px;
        height: 50px;
        background-color: blue;
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
      }
    }*/


  //使用伪类元素after实现清除浮动
  /*.clearfix:after{!*伪元素是行内元素 正常浏览器清除浮动方法*!*/
  /*  content: "";*/
  /*  display: block;*/
  /*  height: 0;*/
  /*  clear:both;*/
  /*  visibility: hidden;*/
  /*}*/
  /*.clearfix {*/
  /*  *zoom: 1; !*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*!*/
  /*}*/

  //使用伪类元素before,after实现清除浮动(最推荐)
  /*.clearfix:after,.clearfix:before{*/
  /*  content: "";*/
  /*  display: table;*/
  /*}*/
  /*.clearfix:after{*/
  /*  clear: both;*/
  /*}*/
  /*.clearfix {*/
  /*  *zoom: 1;*/
  /*}*/

  .page {
    position: relative;
  }

  .grey {
    height: 500px;
    width: 100vw;
    background-color: gray;
  }

  .white {
    height: 500px;
    width: 100vw;
    background-color: white;
  }

  .blue {
    height: 500px;
    width: 100vw;
    background-color: blue;
  }

  .but {
    height: 100px;
    width: 100vw;
    background-color: yellow;
  }

  #backTop3 {
    /*height: 20px;*/
    /*width: 40px;*/
    /*background-color: blue;*/
  }

  .banben {
    height: 100px;
    width: 100vw;
    background-color: skyblue;
  }

  .parallax {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100px;
    font-size: 20px;
    border-radius: 10px;
    left: 0;
    background-color: rgba(211, 211, 211, 0.5);
  }

  .fixed {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100px;
    font-size: 20px;
    border-radius: 10px;
  }

  .description {
    position: relative;
    width: 75%;
    height: 400px;
    margin: 100px auto;
  }

  .firstblock {
    height: 700px;
    margin-top: 130px;
  }

  .dead {
    left: 0;
    background-color: rgba(211, 211, 211, 0.5);
  }

  .simple {
    left: 200px;
    background-color: #ffae00;
  }

  .parallax {
    left: 400px;
    background-color: rgba(211, 211, 211, 0.5);;
  }

  .scrolling {
    left: 600px;
    background-color: #ffae00;
  }

  .text {
    position: relative;
    width: 600px;
    height: 600px;
    background-color: pink;
  }

  .parallax1 {
    position: absolute;
    top: 0;
    left: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 100px;
    font-size: 20px;
    border-radius: 10px;
    background-color: blue;
  }

</style>
